<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <i class="fa fa-arrow-left back-button" @click="goBack"></i>
      <h2>支付设置</h2>
    </header>

    <div class="image-selector">
      <van-radio-group v-model="checked">
        <van-radio name="1">微信</van-radio>
        <van-radio name="2">支付宝</van-radio>
      </van-radio-group>
      <div class="submit-button-container">
        <button @click="handleSubmit" class="submit-button">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { showToast } from "vant";
export default {
  setup() {
    const checked = ref("1");
    const handleSubmit = () => {
      showToast({
        message: "修改成功",
        icon: "passed"
      });
    };

    // 将所有需要返回的变量和函数放在一个对象中
    return {
      checked,
      handleSubmit
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 3.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 设置整个 radio group 的样式 */
.van-radio-group {
  margin-top: 20vw; /* 上边距 */
  display: flex; /* 使单选框水平排列 */
  gap: 20px; /* 设置单选框之间的间距 */
  font-family: 'Arial', sans-serif; /* 设置字体 */
  font-size: 16px; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
  
  /* 添加居中对齐 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}


/* 设置每个 van-radio 的样式 */
.van-radio {
  display: flex;
  align-items: center;
  padding: 5px 10px; /* 为每个单选框添加内边距 */
  border-radius: 4px; /* 设置圆角 */
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  transition: background-color 0.3s; /* 添加背景色变换动画 */
}

/* 鼠标悬停时改变背景色 */
.van-radio:hover {
  background-color: #f0f0f0;
}

/* 选中状态时的样式 */
.van-radio--checked {
  color: #1a73e8; /* 选中时字体颜色改变 */
  font-weight: bold; /* 选中时字体加粗 */
}

/* 设置 radio 按钮的自定义样式 */
.van-radio__input {
  display: none; /* 隐藏默认的 radio 按钮 */
}

.van-radio__label {
  margin-left: 8px; /* 标签和 radio 按钮之间的间距 */
}

/* 调整选中按钮的样式 */
.van-radio__icon {
  border: 2px solid #1a73e8; /* 设置选中时的边框颜色 */
  border-radius: 50%; /* 设置圆形的边框 */
}

.van-radio--checked .van-radio__icon {
  background-color: #1a73e8; /* 选中时背景颜色 */
}

.submit-button {
  display: inline-block; /* 使按钮成为块级元素以便居中 */
  margin: 5vw auto; /* 上下外边距为16vw，左右自动居中 */
  padding: 10px 20px; /* 按钮内边距 */
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文字居中 */
}

.submit-button:hover {
  background-color: #0056b3; /* 悬停时的背景色 */
}

/* 添加父容器样式以确保居中 */
.submit-button-container {
  text-align: center; /* 使按钮容器内的内容居中 */
  margin-top: 20px; /* 可选：为容器添加顶部外边距 */
}

.back-button {
  position: fixed;
  top: 5vw; /* 根据需要调整高度 */
  left: 4vw; /* 给左边留出一定间距 */
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 4vw;
  z-index: 1000;
}
</style>
